<!--
 * @Author: Mr · Lei
 * @Date: 2024-10-17 10:57:29
 * @LastEditors: OBKoro1
 * @LastEditTime: 2024-10-17 10:57:29
 * @FilePath: \ruituan-tuan-web\src\views\nfc\nfc-config\index.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by 四川开局红科技有限公司, All Rights Reserved. 
-->
<template>
  <div class="container">
    <Breadcrumb
      :items="[
        'menu.nfc',
        'menu.nfc.config',
        tabsCurrent === 1 ? 'nfcOrderList.tabs.key1' : 'nfcOrderList.tabs.key2',
      ]"
    />
    <a-card class="general-card">
      <a-tabs
        :default-active-key="1"
        size="large"
        :lazy-load="true"
        @change="tabsChange"
      >
        <a-tab-pane :key="1" :title="$t('nfcOrderList.tabs.key1')">
          <IncomeConfig />
        </a-tab-pane>
        <a-tab-pane :key="2" :title="$t('nfcOrderList.tabs.key2')">
          <UserConfig />
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import UserConfig from './components/userConfig.vue';
  import IncomeConfig from './components/incomeConfig.vue';
  // 选项卡类型
  const tabsCurrent = ref(1);

  // 选项卡切换
  const tabsChange = (val: any) => {
    tabsCurrent.value = val;
  };
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 20px;
  }
  :deep(.arco-table-th) {
    &:last-child {
      .arco-table-th-item-title {
        margin-left: 16px;
      }
    }
  }

  .action-icon {
    margin-left: 12px;
    cursor: pointer;
  }

  .active {
    color: #0960bd;
    background-color: #e3f4fc;
  }

  .setting {
    display: flex;
    align-items: center;
    width: 200px;

    .title {
      margin-left: 12px;
      cursor: pointer;
    }
  }
</style>
